<template>
  <div class="container">
    <h1 class="title">就业公司记录</h1>

    <!-- 公司列表 -->
    <div
      v-for="(company, cIndex) in companies"
      :key="cIndex"
      class="company-card"
    >
      <!-- 公司名称 -->
      <div class="company-header">
        <input
          v-model="company.name"
          type="text"
          placeholder="请输入公司名称"
          class="company-input"
        />
      </div>

      <!-- 步骤列表 -->
      <div
        v-for="(step, sIndex) in company.steps"
        :key="sIndex"
        class="step-item">
        <!-- 下拉选择 -->
        <select v-model="step.name" class="step-name">
          <option disabled value="">请选择步骤</option>
          <option value="网申">网申</option>
          <option value="笔试">笔试</option>
          <option value="一面">一面</option>
          <option value="二面">二面</option>
          <option value="三面">三面</option>
          <option value="HR面">HR面</option>
          <option value="通过">通过</option>
          <option value="签约">签约</option>
        </select>

        <input
          v-model="step.remark"
          type="text"
          placeholder="备注..."
          class="remark-input"
        />
        <button class="btn-small" @click="removeStep(cIndex, sIndex)">
          删除步骤
        </button>
      </div>

      <!-- 添加步骤按钮 -->
      <button
        class="btn-add-step"
        @click="addStep(cIndex)"
        :disabled="company.steps.length >= 8">
        + 添加步骤
      </button>

      <!-- 底部操作按钮 -->
      <div class="card-footer">
        <button class="btn-save" @click="saveCompany(cIndex)">保存</button>
        <button class="btn-remove" @click="removeCompany(company.id)">
          删除公司
        </button>
      </div>
    </div>

    <!-- 添加公司按钮 放到底部 -->
    <div class="add-company-footer">
      <button class="btn-add" @click="addCompany">+ 添加公司</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import axios from "axios";
import { useAuthStore } from '@/stores/authStore'  // 新增：引入authStore
import { post, get } from  '@/axios'
import { ElMessageBox } from "element-plus"
const authStore = useAuthStore()  // 新增：获取authStore实例

// 公司列表数据
const companies = reactive([]);

// 获取列表数据 - 修改后的方法
const fetchCompanies = () => {
	get('/employmentApplication/list', {}, content => {
		companies.splice(0, companies.length)
		content.forEach(item => {
			const steps = []
			for (let i = 1; i <= 8; i++) {
				if (item[`step${i}Status`]) {
					steps.push({
						name: item[`step${i}Status`],
						remark: item[`step${i}Remark`] || ""
					})
				}
			}
			companies.push({
				id: item.id,
				name: item.companyName,
				steps: steps
			})
		})
	})
}

// 添加公司 - 修改后的方法
const addCompany = () => {
	post('/employmentApplication/add', {
		companyName: "",
		step1Status: "网申",
		step1Remark: ""
	}, content => {
		 fetchCompanies()
	})
}

// 删除公司 - 修改后的方法
const removeCompany = (id) => {
	ElMessageBox.confirm('确定要删除该公司记录吗?', '警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		post('/employmentApplication/delete', { id }, content => {
			fetchCompanies()
		})
	}).catch(() => {})
}

// 保存公司 - 修改后的方法
const saveCompany = async (index) => {
  const company = companies[index]
  // 构建请求数据
  const requestData = {
    id: company.id,
    companyName: company.name
  }
  // 添加步骤数据
  company.steps.forEach((step, idx) => {
    requestData[`step${idx + 1}Status`] = step.name;
    requestData[`step${idx + 1}Remark`] = step.remark;
  })
  post('/employmentApplication/update', requestData, content => {
		fetchCompanies()
	})
		
}

// 添加步骤（无需修改）
const addStep = (companyIndex) => {
  if (companies[companyIndex].steps.length >= 8) {
    alert("最多只能添加 8 个步骤！");
    return;
  }
  companies[companyIndex].steps.push({ name: "", remark: "" });
};

// 删除步骤（无需修改）
const removeStep = (companyIndex, stepIndex) => {
  companies[companyIndex].steps.splice(stepIndex, 1);
};

// 页面加载时获取数据
onMounted(() => {
  fetchCompanies();
});
</script>

<style scoped>
/* 页面整体 */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px 80px; /* 预留底部空间给按钮 */
  background: #f9fafb;
  min-height: 100vh;
  position: relative;
}

/* 标题 */
.title {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
  color: #333;
}

/* 公司卡片 */
.company-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  transition: 0.3s;
}
.company-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 公司输入框 */
.company-header {
  margin-bottom: 15px;
}
.company-input {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.company-input:focus {
  outline: none;
  border-color: #4cafef;
  box-shadow: 0 0 4px #4cafef55;
}

/* 步骤 */
.step-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.step-name {
  flex: 0.4;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-right: 10px;
}
.remark-input {
  flex: 0.6;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-right: 10px;
}
.step-name:focus,
.remark-input:focus {
  outline: none;
  border-color: #4cafef;
  box-shadow: 0 0 4px #4cafef55;
}
.btn-small {
  padding: 6px 10px;
  background: #ff9800;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-small:hover {
  background: #f57c00;
}

/* 添加步骤按钮 */
.btn-add-step {
  margin-top: 10px;
  padding: 8px 14px;
  background: #81c784;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-add-step:hover {
  background: #66bb6a;
}
.btn-add-step:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 卡片底部按钮 */
.card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.btn-save {
  padding: 8px 14px;
  margin-right: 10px;
  background: #4cafef;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-save:hover {
  background: #2196f3;
}
.btn-remove {
  padding: 8px 14px;
  background: #e53935;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-remove:hover {
  background: #c62828;
}

/* 添加公司按钮放到底部 */
.add-company-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
.btn-add {
  padding: 12px 24px;
  background: #4cafef;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}
.btn-add:hover {
  background: #2196f3;
  transform: translateY(-2px);
}
</style>
